"use client"
import React, { useEffect, useState } from 'react'
import DataCart from '@/components/DataCart'
import { getHouseType, getHouseTypeCount } from '@/apis/statistics'
import style from './index.module.scss'

// echart模块
import * as echarts from 'echarts';

const iconArr = ['icon-loufangfangzi', 'icon-shouye', 'icon-fenshua', 'icon-motiandalou']
export default function House() {
  // 数据列表
  const [dataList, setDataList] = useState([])
  // echart列表
  const [echartList, setEchartList] = useState([])

  // 初始化echarts
  useEffect(() => {
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: '商品房 vs 经济适用房',
        subtext: '房屋类型'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['商品房', '经济适用房']
      },
      toolbox: {
        show: true,
        feature: {
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      calculable: true,
      xAxis: [
        {
          type: 'category',
          // prettier-ignore
          // data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
          data: dataList.map(item => item.title)
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '商品房',
          type: 'bar',
          data: echartList.map((item, index) => {
            return item[dataList[index].title]['商品房'] || 0
          }),
          markPoint: {
            data: [
              { type: 'max', name: 'Max' },
              { type: 'min', name: 'Min' }
            ]
          },
          markLine: {
            data: [{ type: 'average', name: 'Avg' }]
          }
        },
        {
          name: '经济适用房',
          type: 'bar',
          data: echartList.map((item, index) => {
            return item[dataList[index].title]['经济适用房'] || 0
          }),
          markPoint: {
            data: [
              { type: 'max', name: 'Max' },
              { type: 'min', name: 'Min' }
            ]
          },
          markLine: {
            data: [{ type: 'average', name: 'Avg' }]
          }
        }
      ]
    };

    option && myChart.setOption(option);

  }, [dataList, echartList])

  useEffect(() => {
    ; (async () => {
      const res = await getHouseType()
      setDataList(res.data.map((item, index) => (
        {
          icon: iconArr[index],
          title: item.decoration,
          data: item.count
        }
      )))
      const res2 = await getHouseTypeCount()
      console.log(res2.data)
      setEchartList(res2.data)
    })()
  }, [])
  return (
    <div className={style['house-container']}>
      <div className={style['data-cart-list']}>
        {dataList.map(item => (
          <DataCart key={item.title} obj={item} />
        ))}
      </div>
      <div id="main" className={style['echart']}></div>
    </div>
  )
}
